

class MiMsgList extends React.Component {


    constructor(props) {
        super(props);

    }

    state={
        data:[],
        isMonitorSocketMsg:false,
        isMonitorMqMsg:false,
        mqProductStatue:false
    }
    componentDidMount() {
        app.get("/MiMsgListAppendMsg",async (req,res)=>{
            req.params.m=JSON.stringify( req.params.m);
            if(this.state.data.length>30){
                this.state.data.length=5;
            }
            let list=[req.params,...this.state.data]
            this.setState({
                data:list
            });
        });
        MIO.gloableConfigGetVs({}).then(d=>{
            this.setState({
                isMonitorSocketMsg:d.data.isMonitorSocketMsg,
                isMonitorMqMsg:d.data.isMonitorMqMsg,
                mqProductStatue:d.data.mqProductStatue,
            })
        });
    };

    appendMsg(t,m){
        let list=[{t,m},...this.state.data]
         this.setState({
             data:list
         });
    }

    render() {

          return (
              <div>
                    <label style={{marginRight:20}}>监控socket消息</label>
                    <Switch
                        style={{marginRight:150}}
                        checked ={this.state.isMonitorSocketMsg} onChange={async (v)=>{
                       let r=await MIO.gloableConfigSetV({
                            k:"isMonitorSocketMsg",
                            v:v
                        });
                       if(M.checkR(r)){
                           this.setState({
                               isMonitorSocketMsg:v
                           })
                       };

                    }} ></Switch>

                  <label style={{marginRight:20}}>监控Mq消息</label>
                  <Switch
                      style={{marginRight:50}}
                      checked ={this.state.isMonitorMqMsg} onChange={async (v)=>{
                      let r=await MIO.gloableConfigSetV({
                          k:"isMonitorMqMsg",
                          v:v
                      });
                      if(M.checkR(r)){
                          this.setState({
                              isMonitorMqMsg:v
                          })
                      };

                  }} ></Switch>
                  <label style={{marginRight:10}}>mq连接状态:</label>
                  <label>{this.state.mqProductStatue==true?<span style={{color:"green"}}>在线</span>:<span style={{color:"red"}}>离线</span>}</label>
                  <hr/>
                  <List
                      style={{"overflow-y":"scroll","height":800}}
                      itemLayout="horizontal"
                      dataSource={this.state.data}
                      renderItem={(item) => {
                          let avatarSrc="./img/amqp.png";
                          switch (item.c){
                              case "t": {
                                  avatarSrc="./img/listen.png";
                                  break;
                              }
                              case "s": {
                                  avatarSrc="./img/socket.png";
                                  break;
                              }
                          }
                          return <List.Item>
                              <List.Item.Meta
                                  avatar={<Avatar src={avatarSrc} />}
                                  title={item.t}
                                  description={item.m}
                              />
                          </List.Item>

                      }}
                  />
              </div>

        )
    }
}











